SherbyNet - /page/wikibook/entry.mu

Micron Document

<!DOCTYPE html>

</head>

CSS hack

</h1>

</header>

A CSS hack is a <a href="Computer_programming" title="Computer programming">coding</a> technique used to hide or show <a href="Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">CSS</a> <a href="Markup_language" title="Markup language">markup</a> depending on the <a href="Web_browser" title="Web browser">browser</a>, version number, or capabilities. Browsers have different interpretations of CSS behavior and different levels of support for the <a href="W3C" class="mw-redirect" title="W3C">W3C</a> <a href="World_Wide_Web_Consortium#Standards" title="World Wide Web Consortium">standards</a>. CSS hacks are sometimes used to achieve consistent layout appearance in multiple browsers that do not have compatible rendering. Most of these hacks do not work in modern versions of the browsers, and other techniques, such as feature support detection, have become more prevalent.

<div class="mw-heading mw-heading2"><h2 id="Types_of_hacks">Types of hacks</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Invalid_or_non-compliant_CSS">Invalid or non-compliant CSS</h3></div>

Due to quirks in the interpretation of CSS by various browsers, most CSS hacks involve writing invalid CSS rules that are interpreted only by specific browsers, or relying on bugs in specific browsers. An example of this is prefixing rules with an underscore (as in <code>_width</code>) to target Internet Explorer 6—other browsers will ignore the line, allowing it to be used to write code specific to one <a href="Web_browser" title="Web browser">browser</a>.

Similar CSS hacks involve inducing syntax errors like asterisks, missing whitespace, and CSS comments around property names. Additionally, in <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> 6 and 7, the <code>!important</code> declaration is recognized as such with any string after the exclamation mark, e.g. <code>!ie</code>.<a href="#cite_note-1">[1]</a>

<div class="mw-heading mw-heading3"><h3 id="Unsupported_CSS">Unsupported CSS</h3></div>

Although newer CSS rules are correct by current standards, they are ignored by older browsers as "invalid". By writing old rules followed by newer rules that cancel out or modify the old ones, it is possible to only activate certain rules on older browsers.

<div class="mw-heading mw-heading3"><h3 id="Conditional_comments">Conditional comments</h3></div>

Prior to version 10, <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> supported a special comment syntax that would allow blocks of HTML to be read only by specific versions of the browser. These comments are mostly used to provide specific CSS and JavaScript workarounds to older versions of the browser. No other browsers interpreted these comments or offered similar functionality.

The following are examples of the different syntax for these comments.

<![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css">

</head>

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Critics">Critics</h3></div>

Hiding code using hacks often leads to pages being incorrectly displayed when browsers are updated. These hacks can lead to unexpected behavior in newer browsers that may interpret them differently than their predecessors. Since Internet Explorer 6 and 7 have fallen out of use, CSS hacks have declined as well. Modern methods of feature targeting are less fragile and error-prone.

<div class="mw-heading mw-heading2"><h2 id="Alternatives">Alternatives</h2></div>

<div class="mw-heading mw-heading3"><h3 id="Browser_prefixes">Browser prefixes</h3></div>

Each of the most popular browser <a href="Rendering_(computer_graphics)" title="Rendering (computer graphics)">rendering</a> engines has its own <a href="Vendor_prefix" class="mw-redirect" title="Vendor prefix">vendor prefix</a> for experimental properties. However, due to the proliferation of these properties in live code, the browser <a href="Vendors" class="mw-redirect" title="Vendors">vendors</a> have begun moving away from this practice in favor of feature flags.<a href="#cite_note-2">[2]</a>

<div class="mw-heading mw-heading4"><h4 id="List_of_prefixes">List of prefixes</h4></div>

The following are a list of prefixes from various layout engines:

<th>Vendor Prefix</th>

<th>Layout Engine</th>

<th>Created by</th>

<th>Used by

</th></tr>

<tr>

<td>Formatter</td>

<td>Antenna House</td>

<td>Antenna House Formatter

</td></tr>

<tr>

<td><code>-apple-</code></td>

<td><a href="WebKit" title="WebKit">WebKit</a></td>

<td><a href="Apple_Inc." title="Apple Inc.">Apple Inc.</a></td>

<td><a href="Safari_(web_browser)" title="Safari (web browser)">Apple Safari 2.0</a>, Opera Widgets, <a href="Acid3#Chrome,_Presto_and_WebKit_based_browsers" title="Acid3">WebKit-Based Browsers (as legacy prefix)</a>

</td></tr>

<tr>

<td><a href="Advanced_Television_Systems_Committee_standards" class="mw-redirect" title="Advanced Television Systems Committee standards">Advanced Television Systems Committee standards</a></td>

<td>

</td></tr>

<tr>

<td>WebKit</td>

<td><a href="EPUB" title="EPUB">EPUB Working Group</a></td>

<td><a href="Chromium_(web_browser)" title="Chromium (web browser)">Chromium</a> / <a href="Google_Chrome" title="Google Chrome">Google Chrome</a>, WebKit-Based Browsers

</td></tr>

<tr>

<td><a href="Sun_Microsystems" title="Sun Microsystems">Sun Microsystems</a> (now acquired by <a href="Oracle_Corporation" title="Oracle Corporation">Oracle Corporation</a>)</td>

<td><a href="JavaFX" title="JavaFX">JavaFX</a> applications

</td></tr>

<tr>

<td><a href="Hewlett-Packard" title="Hewlett-Packard">Hewlett-Packard</a> (now <a href="HP_Inc." title="HP Inc.">HP Inc.</a> and <a href="Hewlett_Packard_Enterprise" title="Hewlett Packard Enterprise">Hewlett Packard Enterprise</a>)</td>

<td>

</td></tr>

<tr>

<td><code>-khtml-</code></td>

<td><a href="KHTML" title="KHTML">KHTML</a> / WebKit</td>

<td>KDE <a href="Konqueror" title="Konqueror">Konqueror</a> / Apple Safari 1.1 through Safari 2.0, WebKit-Based Browsers (as a legacy prefix)

</td></tr>

<tr>

<td><a href="Gecko_(software)" title="Gecko (software)">Gecko</a></td>

<td><a href="Mozilla_Foundation" title="Mozilla Foundation">Mozilla Foundation</a></td>

<td>Gecko-Based Browsers[?], Mozilla Firefox

</td></tr>

<tr>

<td><a href="Trident_(layout_engine)" class="mw-redirect" title="Trident (layout engine)">Trident</a> / MSHTML</td>

<td><a href="Microsoft_Corporation" class="mw-redirect" title="Microsoft Corporation">Microsoft Corporation</a></td>

<td><a href="Internet_Explorer" title="Internet Explorer">Microsoft Internet Explorer</a>

</td></tr>

<tr>

<td>Office</td>

<td>Microsoft Corporation</td>

<td>Microsoft Office[?]

</td></tr>

<tr>

<td><a href="Presto_(layout_engine)" class="mw-redirect" title="Presto (layout engine)">Presto</a></td>

<td><a href="Opera_Software" class="mw-redirect" title="Opera Software">Opera Software</a></td>

<td><a href="Opera_(web_browser)" title="Opera (web browser)">Opera desktop Browser up to version 12.16</a>, <a href="Opera_Mini" title="Opera Mini">Opera Mini</a>, and <a href="Opera_Mobile" title="Opera Mobile">Opera Mobile up to version 12.1</a>, <a href="Nintendo_DS" title="Nintendo DS">Nintendo DS</a> & <a href="Nintendo_DSi" title="Nintendo DSi">Nintendo DSi</a> Browser, Nintendo Wii Internet Channel

</td></tr>

<tr>

<td><code>-prince-</code></td>

<td><a href="Prince_(software)" title="Prince (software)">Prince</a></td>

<td><a href="YesLogic" class="mw-redirect" title="YesLogic">YesLogic</a></td>

<td>YesLogic Prince

</td></tr>

<tr>

<td>WebKit</td>

<td><a href="BlackBerry_Limited" title="BlackBerry Limited">BlackBerry Limited</a></td>

<td>RIM Blackberry Browser

</td></tr>

<tr>

<td>MARTHA</td>

<td>RealObjects</td>

<td>RealObjects PDFreactor

</td></tr>

<tr>

<td>TallComponents</td>

<td>TallComponents

</td></tr>

<tr>

<td>Presto</td>

<td><a href="Open_Mobile_Alliance" title="Open Mobile Alliance">The WAP Forum</a></td>

<td>Opera Desktop Browser and Opera Mobile, The WAP Forum

</td></tr>

<tr>

<td><code class="nowrap">-webkit-</code></td>

<td>WebKit/Blink</td>

<td><a href="Apple_Inc." title="Apple Inc.">Apple Inc.</a> (<a href="WebKit" title="WebKit">WebKit</a>)/ <a href="Google" title="Google">Google Inc.</a> (<a href="Blink_(browser_engine)" title="Blink (browser engine)">Blink</a>)</td>

<td>Apple Safari & Safari for iOS (WebKit), Chromium / Google Chrome desktop and mobile (Blink), Opera desktop and mobile from version 14 (Blink), Android browser (Blink), <a href="Nokia" title="Nokia">Nokia</a> MeeGo Browser 8.5, Nokia <a href="Symbian" title="Symbian">Symbian</a> Browser 7.0 and later (WebKit), Blackberry Browser 6.0 and later (WebKit).

</td></tr>

<tr>

<td>Presto</td>

<td>Opera Software</td>

<td>Opera Desktop Browser for Windows 2000/XP

</td></tr></tbody></table>

<div class="mw-heading mw-heading4"><h4 id="Example">Example</h4></div>

<div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>/* Cross-browser css3 linear-gradient */

.linear-gradient {

/* Gecko browser (Firefox) */

/* Opera */

/* older Webkit syntax */

color-stop(0, #D7D), color-stop(1, #068));

/* Webkit (Safari, Chrome, iOS, Android) */

/* W3C */

}

</pre></div>

<div class="mw-heading mw-heading4"><h4 id="Limitation">Limitation</h4></div>

Vendor prefixes were designed for features that were under development, meaning that the syntax may not even be final. Also, adding a rule for each browser's implementation of a function does not scale well when you want to support many browsers. Consequently, the major browser vendors are moving away from vendor prefixes in favor of other methods such as <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr">@supports</code> feature queries.

<div class="mw-heading mw-heading3"><h3 id="Feature_deletion">Feature deletion</h3></div>

<div class="mw-heading mw-heading4"><h4 id="JavaScript_feature_detection">JavaScript feature detection</h4></div>

Multiple <a href="JavaScript" title="JavaScript">JavaScript</a> libraries exist to detect what features are available in a particular browser so that CSS rules can be written to target them. Libraries such as Modernizr add classes to the <code>html</code> element, allowing for CSS rules such as <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr">.cssgradients .header</code>.

<div class="mw-heading mw-heading4"><h4 id="Feature_queries">Feature queries</h4></div>

A new feature known as feature queries was introduced in <a href="CSS" title="CSS">CSS3</a>, allowing the detection of specific functionality within the CSS (without requiring the use of a JavaScript library for <a href="Feature_detection_(web_development)" title="Feature detection (web development)">feature detection</a>). This new directive can be used to check for the support or lack of support for a specific feature, and checks can be combined with <code>and</code>, <code>or</code>, and <code>not</code>. Obviously, <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr">@supports</code> rules will only work on browsers that support <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr">@supports</code>. <div class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr"><pre>header {

display: block;

}

@supports (display: flex) {

header {

display: flex;

}

}

</pre></div>

<div class="mw-heading mw-heading3"><h3 id="Script_polyfills">Script polyfills</h3></div>

While JavaScript feature detection and <code class="mw-highlight mw-highlight-lang-css mw-content-ltr" dir="ltr">@supports</code> rules can help to target browsers that require fallback functionality, they will not address bugs in specific browsers or enable that advanced functionality. <a href="Polyfill_(programming)" title="Polyfill (programming)">Polyfills</a>, scripts that make behavior consistent across all browsers, can be used to add support for new CSS rules (for example, <a href="Media_queries" title="Media queries">media queries</a> in IE 8) as well as fix bugs in specific browsers. Since polyfills add or fix functionality in browsers that do not have it, they serve a different purpose than feature queries, but can be used in combination with them.

<div class="mw-heading mw-heading2"><h2 id="References">References</h2></div>

/* start https://en.wikipedia.org/ */

.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("./mw/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("./mw/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("./mw/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("./mw/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}

/* end https://en.wikipedia.org/ */

</style><cite id="CITEREFPaul_Irish2009" class="citation web cs1">Paul Irish (15 April 2009). <a rel="nofollow" class="external text" href="https://www.paulirish.com/2009/browser-specific-css-hacks/">"Browser CSS hacks"</a>. www.paulirish.com. Retrieved 8 June 2022.</cite>

</li>

<li id="cite_note-2"><a href="#cite_ref-2">^</a> <cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix">"Vendor Prefix"</a>. Mozilla Developer Network. Retrieved 12 October 2016.</cite>

</li>

</ol></div>

<div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20150311021026/http://browserstrangeness.bitbucket.org/css_hacks.html">Browser Strangeness</a> – Jeff Clayton's Live CSS hacks and tests to filter for mainstream browsers, including the only known CSS Hacks for Safari 7 and 8</li>

<li><a rel="nofollow" class="external text" href="http://browserhacks.com/">browserhacks.com</a> – Multiple browser filter methods and tests (Hugo Giraudel, Joshua Hibbert, Tim Pietrusky, Fabrice Weinberg, Jeff Clayton)</li>

<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20120212190720/http://qooxdoo.org/documentation/general/webkit_css_styles">Safari/Webkit (webkit) prefix filters</a> refix filters]</li>

<li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/Special:Tags?tag=CSS:Mozilla+Extensions">Mozilla (moz) prefix filters</a></li>

<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20161221232725/http://www.opera.com/docs/specs/opera9/css/index.dml">Opera (wap) prefix filters</a> – This page has all of Opera's CSS selectors.</li>

<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20060804012032/http://centricle.com/ref/css/filters/">CSS Filters</a> – A fairly complete table of CSS hacks which show and hide rules from specific browsers.</li>

<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20070715175654/http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html">Filters and Cross-Over</a> – CSS filters. Parsing errors marked red.</li>

<li><a rel="nofollow" class="external text" href="http://rafael.adm.br/css_browser_selector">– CSS Browser Selector</a> – Allows to combine browser specific CSS in single stylesheet (using JavaScript).</li>

<li><a rel="nofollow" class="external text" href="https://web.archive.org/web/20110720143842/http://www.positioniseverything.net/articles/cc-plus.html">– #IEroot</a> – Targeting IE with a single stylesheet containing all CSS (without using JavaScript, but using conditional comments to assign browser-specific tag to arbitrary content root <code class="nowrap" style=""><div></code>)</li>

<li><a rel="nofollow" class="external text" href="https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet">How to target only IE (any version) within a stylesheet?</a> – discussion on <a href="StackOverflow" class="mw-redirect" title="StackOverflow">StackOverflow</a></li>

<li><a rel="nofollow" class="external text" href="https://stackoverflow.com/questions/11173106/apply-style-only-on-ie">Apply style ONLY on IE</a> – discussion on <a href="StackOverflow" class="mw-redirect" title="StackOverflow">StackOverflow</a></li>

<li><a rel="nofollow" class="external text" href="https://www.rareprogrammer.com/css-comments">CSS Comments</a> - How to add comments in CSS</li></ul></div><div><div class="zim-footer">

This article is issued from <a class="external text" title="Last edited on 2025-06-17" href="https://en.wikipedia.org/wiki/?title=CSS_hack&oldid=1296091904">Wikipedia</a>. The text is available under <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-Share Alike 4.0</a> unless otherwise noted. Additional terms may apply for the media files.

</div>

</div></div>

</div>

</main>

</div>

</body></html>